<template>
  <div>
    <a-card>新建分组信息</a-card>
    <a-card class="content">
      <a-form
        name="custom-validation"
        ref="formRef"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        @finish="onSubmit"
      >
        <a-form-item has-feedback label="分组名称" name="username">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item has-feedback label="分组描述" name="email">
          <a-input v-model:value="formState.info" />
        </a-form-item>
        <a-form-item has-feedback label="分配权限" name="permission_ids">
        
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" html-type="submit" @click="save"
            >保存</a-button
          >
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted, watch } from "vue";
import { message } from "ant-design-vue";
//api
import { permissions, addPermissions, getUsersGroup } from "@/api/api.js";
export default {
  emits: ["changeList"],
  setup(props, context) {
    const formRef = ref(null);
    const state = reactive({
      indeterminate: true,
      indeterminate1: true,
      checkAll: false,
      checkAll1: false,
      checkedList: [],
      checkedList1: [],
      checkedList2: [],
      checkedList3: [],
      data: [],
      checkbox: [],
      checkbox1: [],
    });
    const formState = reactive({
      name: "",
      info: "",
      permission_ids: "",
    });
    const onCheckAllChange = (e) => {
      Object.assign(state, {
        checkedList: e.target.checked ? state.checkedList2 : [],
        indeterminate: false,
      });
    };
    const onCheckAllChange1 = (e) => {
      Object.assign(state, {
        checkedList1: e.target.checked ? state.checkedList3 : [],
        indeterminate: false,
      });
    };
    const onSubmit = async () => {
      // console.log(state.checkedList1);
      // console.log(state.checkedList);
      context.emit("changeList", state.checkedList);
      formState.permission_ids = [...state.checkedList, ...state.checkedList1];
      console.log(formState);
      let res = await addPermissions(formState);
      if (res) {
        message.success(res.data.message);
        this.$emit("changeList", res);
      }
      resetForm();
    };
    const resetForm = () => {
      formState.name = "";
      formState.info = "";
      state.checkedList = [];
      state.checkedList1 = [];
    };

    const getList = async () => {
      let res = await permissions();
      let data = res.data;
      if (!data) {
        return false;
      }
      data.图书.map((item) => {
        state.checkbox.push({
          label: item.name,
          value: item.id,
        });
        state.checkedList2.push(item.id);
      });
      data.日志.map((item) => {
        state.checkbox1.push({
          label: item.name,
          value: item.id,
        });
        state.checkedList3.push(item.id);
      });
    };
    onMounted(() => {
      getList();
    });
    watch(
      () => state.checkedList,
      (val) => {
        state.indeterminate =
          !!val.length && val.length < state.checkbox.length;
        state.checkAll = val.length === state.checkbox.length;
      },
      () => state.checkedList1,
      (val1) => {
        state.indeterminate =
          !!val1.length && val1.length < state.checkbox1.length;
        state.checkAll1 = val1.length === state.checkbox1.length;
      }
    );

    const save = () => {
      console.log(1);
    };

    return {
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 14,
      },
      resetForm,
      formRef,
      onSubmit,
      formState,
      ...toRefs(state),
      onCheckAllChange,
      onCheckAllChange1,
      save,
    };
  },
};
</script>

<style lang="less" scoped>
.detail {
  height: 200px;
  display: flex;
  flex-direction: column;
  .group {
    flex: 1;
    line-height: 50px;
  }
}
.backColor {
  background-color: #fafafa;
}
</style>
